<template>
  <div class="discover-list">
    <div
      v-for="t in topicList"
      :key="t.id"
      class="topic-container"
      @click="gotoTopicDetails(t.content_id,t.category)"
    >
      <img :src="t.cover">
      <p class="title">{{t.title}}</p>
    </div>
   
  </div>
</template>

<script>
export default {
  props: {
    topicList: Array,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 跳转去专题文章详情页面
    gotoTopicDetails(id, category) {
      // console.log(id);
      console.log(this.topicList);
      this.$router.push({
        path: "/topic",
        query: {
          id,
          category,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.discover-list {
  padding: 80px 10px 10px;
  height: 100vh;
  overflow: auto;

  .topic-container {
    margin-bottom: 50px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #f6f6f6;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
      //   transform: scale(1.2);
    }
    .title {
      padding: 15px 10px;
    }
  }
}
</style>